<template>
  <div :class="['fwwccwh']" :style="{}">
    <div :style="namestyle" v-if="componentDetail.showcity">{{ cityname }}</div>
    <div :style="logostyle">
      <icon-svg
        :icon-class="logo"
        :color="'yellow'"
        :width="iwidth"
        :height="iheight"
        style="cursor: pointer"
      ></icon-svg>
    </div>
    <div :style="lowstyle">{{ low }}</div>
    <div :style="typestyle" class>
      <div style="position: absolute; bottom: 0px">{{ type }}</div>
    </div>
  </div>
</template>
<script>

import pinyin from "chinese-to-pinyin";
import commonmixins from "@/mixins/bigScreen/commonmixins";

export default {
  name: "commontitleweather",
  mixins: [commonmixins],
  components: {},
  props: {
    content: {
      default: () => {
        return {
          name: "郑州",
        };
      },
    },
  },
  data() {
    return {
      low: "test",
      type: "test",
      logo: "test",
      cityname: "",
    };
  },
  computed: {
    logostyle() {
      return {
        padding: "10px 20px",
      };
    },
    lowstyle() {
      return {
        fontSize: this.getscalepxc(30),
      };
    },
    typestyle() {
      return {
        height: this.getscalepxc(30),
        fontSize: this.getscalepxc(10),
        position: "relative",
      };
    },
    iwidth() {
      return this.getscalepxc(30);
    },
    iheight() {
      return this.getscalepxc(30);
    },
    namestyle() {
      return {
        fontSize: this.getscalepxc(30),
        padding: "0px " + this.getscalepxc(0),
      };
    },
  },
  watch: {
    "$store.state.daping.commontianqishishi": {
      handler: function (n, o) {
        this.loadData(n);
      },
    },
  },
  mounted() {
    if (this.componentDetail["cityname"]) {
      this.cityname = this.componentDetail["cityname"];
    }
  },
  destroyed() {

  },
  methods: {
    async loadData(res) {
      let _this = this;
      _this.low = res.data[0].temperature + "℃";
      _this.type = res.data[0].weather;
      _this.logo = pinyin(res.data[0].weather, {
        removeSpace: true,
        removeTone: true,
      });
    },
  },
};
</script>
<style lang='scss' scoped>
</style>